<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="尹 个人网站 个人简介">
    <meta meta name="description" content="尹的个人网站（我的介绍）">
    <title>尹的个人网站</title>
    <style>
        @keyframes animate {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        
        .container {
            height: 875px;
            width: 1850px;
            position: absolute;
        }
        
        #up1 {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 3%;
            left: 50%;
            animation: jump 1s infinite;
        }
        
        .four {
            width: 950px;
            display: inline-block;
            position: absolute;
            top: 7%;
            left: 38.5%;
        }
        
        #aboutme {
            animation: animate 6s;
        }
        
        #p1 {
            animation: animate 6s;
        }
        
        .five {
            animation: animate 6s;
        }
        
        #part1 {
            line-height: 30px;
            text-indent: 2em;
            font-size: 20px;
        }
        
        #part2 {
            line-height: 30px;
            text-indent: 2em;
            font-size: 20px;
        }
        
        .five #icon1 {
            width: 55px;
            height: 55px;
            position: absolute;
            top: 62.5%;
            left: 38.5%;
        }
        
        .skill {
            width: 375px;
            position: absolute;
            top: 62.5%;
            left: 43%;
            font-size: 20px;
            line-height: 30px;
        }
        
        .skill #my {
            text-decoration: none;
            color: black;
        }
        
        #my:hover {
            border-bottom: 1px solid black;
            padding-bottom: 5px;
        }
        
        .five #icon2 {
            width: 55px;
            height: 55px;
            position: absolute;
            top: 62.5%;
            left: 65%;
        }
        
        .works1 {
            width: 375px;
            position: absolute;
            top: 60%;
            left: 69.5%;
            font-size: 20px;
        }
        
        .five #icon3 {
            width: 55px;
            height: 55px;
            position: absolute;
            top: 78%;
            left: 38.5%;
        }
        
        .works2 {
            width: 375px;
            position: absolute;
            top: 78.5%;
            left: 43%;
            font-size: 20px;
        }
        
        #w1 {
            text-decoration: none;
            color: black;
        }
        
        #w1:hover {
            border-bottom: 1px solid black;
            padding-bottom: 5px;
        }
        
        .five #icon4 {
            width: 55px;
            height: 55px;
            position: absolute;
            top: 78%;
            left: 65%;
        }
        
        .me {
            width: 375px;
            position: absolute;
            top: 76%;
            left: 69.5%;
            font-size: 20px;
        }
        
        #down2 {
            width: 30px;
            height: 30px;
            position: absolute;
            bottom: 1%;
            left: 50%;
            animation: jump 1s infinite;
        }
        
        .border ul {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        
        .border ul li {
            display: inline-block;
        }
        
        .border {
            float: right;
            position: relative;
        }
        
        .border a {
            font-size: 24px;
            text-decoration: none;
            color: black;
            line-height: 80px;
            padding: 15px 15px;
        }
        
        .border a:hover {
            border-bottom: 2px solid black;
            padding-bottom: 20px;
        }
        
        .fixed {
            background-color: #2ecc71;
            position: fixed;
            bottom: 4%;
            right: 1.5%;
            width: 150px;
            height: 150px;
            border-radius: 75px;
            text-align: center;
            line-height: 150px;
            animation: animate 10s;
            font-size: 40px;
            /* color: white;
            text-decoration: none; */
        }
        
        .fixed a {
            font-size: 35px;
            color: white;
            text-decoration: none;
        }
        
        #photos11 {
            display: none;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .fixed:hover #photos11 {
            display: block;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="fixed">
            <a href="#">联系我</a>
            <div>
                <img id="photos11" src="11.jpg" alt="">
            </div>
        </div>
        <!-- <a href="#"><img id="up1" src="3.png" alt=""></a> -->
        <div>
            <div class="border">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="2.html">我的技能</a></li>
                    <li><a href="3.html ">版式设计</a>
                    </li>
                    <li><a href="#">手绘作品</a></li>
                </ul>
            </div>

        </div>
        <!-- <div class="fixed">
            <a href="#">联系我</a>
        </div> -->
        <img id="p1" src="https://via.placeholder.com/625x875" alt="">
        <div class=four>
            <h1 id=aboutme>关于我</h1>
            <br>
            <br>
            <div id="part1"></div>
            <script>
                var text = "我是尹，是一名在读大学生，今年大二。我学习的专业是艺术与科技。我是一名设计小白，会一些ps、ai、html/css、pr等等。这个网站主要是关于我的个人介绍以及个人作品展示。这是我第一次做个人网站，如果有什么改进的建议，非常欢迎与我联系！I am Yin, a college student, sophomore year this year. My major is art and technology. I am a design novice, know some ps, ai, html/css, pr, etc. This website is mainly about my personal introduction and personal works display. This is my first personal website. If you have any suggestions for improvement, please feel free to contact me!";
                var num = text.length;

                var i = 0;

                function show() {
                    var shower = text.substr(0, i);
                    document.getElementById("part1").innerHTML = shower;
                    i++;
                    if (i + 1 >= num) {
                        clearInterval("done");
                    }
                }
                var done = setInterval("show()", 40);
            </script>

            <!-- <div id="part1">我是尹，是一名在读大学生，今年大二。我学习的专业是艺术与科技。我是一名设计小白，会一些ps、ai、html/css、pr等等。这个网站主要是关于我的个人介绍以及个人作品展示。这是我第一次做个人网站，如果有什么改进的建议，非常欢迎与我联系！</div>
            <br>
            <div id="part2">I am Yin, a college student, sophomore year this year. My major is art and technology. I am a design novice, know some ps, ai, html/css, pr, etc. This website is mainly about my personal introduction and personal works display. This is my
                first personal website. If you have any suggestions for improvement, please feel free to contact me!</div> -->
            <!-- <script>
                var text = "Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est, eam dicam soluta ei. Vel dicam vivendo accusata ei, cum ne periculis molestiae pri.Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est, eam dicam soluta ei. Vel dicam vivendo accusata ei, cum ne periculis molestiae pri.Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est, eam dicam soluta ei. Vel dicam vivendo accusata ei, cum ne periculis molestiae pri.Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est, eam dicam soluta ei. Vel dicam vivendo accusata ei, cum ne periculis molestiae pri.";
                var num = text.length;

                var i = 0;

                function show() {
                    var shower = text.substr(0, i);
                    document.getElementById("part1").innerHTML = shower;
                    i++;
                    if (i + 1 >= num) {
                        clearInterval("done");
                    }
                }
                var done = setInterval("show()", 20);
            </script> -->
        </div>
        <div class=five>
            <img id=icon1 src="icon.png" alt="">
            <img id=icon2 src="icon2.png" alt="">
            <img id=icon3 src="icon3.png" alt="">
            <img id=icon4 src="icon4.png" alt="">
            <div class="skill">
                <a href="file:///D:/html%E4%BD%9C%E4%B8%9A/%E6%9C%9F%E6%9C%AB%E4%BD%9C%E4%B8%9A/personal%20website/index2.html" id="my">我的技能</a>
                <p>会一些PS、AI、HTML/CSS、PR</p>
            </div>
            <div class="works1">
                <p>手绘作品</p>
                <p>一些插画作品</p>
            </div>
            <div class="works2">
                <a href="file:///D:/html%E4%BD%9C%E4%B8%9A/%E6%9C%9F%E6%9C%AB%E4%BD%9C%E4%B8%9A/personal%20website/index3.html" id="w1">版式设计</a>
                <p>一些用PS做的海报</p>
            </div>
            <div class="me">
                <p>联系我</p>
                <p>微信、QQ、电话号码</p>
            </div>
            <!-- <a href="#"><img id="down2" src="4.png" alt=""></a> -->
        </div>
</body>

</html>